import React, { useEffect, useMemo, useState } from 'react';
import MarkLayout from '@/component/MarkLayout';
import router from '@/router';
import { Link, Outlet, useLocation } from 'react-router-dom';
import { Menu } from 'antd';
import { comPath } from '../../constants';

export default function IndexPage() {
  // 組件
  const [selectedKeys, setSelectedKeys] = useState<string>('');
  useEffect(() => {
    const selectedKeys = location.pathname.replace(`/${comPath}/`, '');
    setSelectedKeys(selectedKeys);
  }, [location.pathname]);

  const items = useMemo(() => {
    const twoPath = router[0].children!.find(i => i.path === comPath);
    if (twoPath?.children) {
      return (twoPath.children as any[]).reduce((t, v) => {
        if (v.path) {
          t.push({
            key: v.path,
            label: <Link to={v.path}>{v.name || v.path}</Link>
          });
        }
        return t;
      }, []);
    }
    return [];
  }, [router]);

  return (
    <div style={{ display: 'flex', height: 'inherit', minHeight: 'calc(100vh - 107px)' }}>
      <div className="scroll" style={{ minWidth: '100px', width: '20vw' }}>
        <Menu selectedKeys={[selectedKeys]} items={items} className="menu2" />
      </div>
      <div
        style={{ width: '80vw', padding: '10px', display: 'flex', justifyContent: 'center' }}
        aria-label="content"
        className="scroll"
      >
        <div style={{ width: '80%', minWidth: '500px' }}>
          <Outlet />
        </div>
      </div>
    </div>
  );
}
